<template>
	<view>
		<view class="goods-list">
			<block v-for="(goods, i) in goodsList" :key="i">
				<view class="goods-item" @click="gotoDetail(goods)">
					<!-- 商品左侧图片区域 -->
					<view class="goods-item-left"><image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image></view>
					<!-- 商品右侧信息区域 -->
					<view class="goods-item-right">
						<!-- 商品标题 -->
						<view class="goods-name">{{ goods.goods_name }}</view>
						<view class="goods-info-box">
							<!-- 商品价格 -->
							<view class="goods-price">￥{{ goods.goods_price | tofixed }}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { log } from 'util'
export default {
	data() {
		return {
			// 请求参数对象
			queryObj: {
				// 查询关键字
				query: '',
				// 商品分类Id
				cid: '',
				// 页码值
				pagenum: 1,
				// 每页显示多少条数据
				pagesize: 10
			},
			// 商品列表的数据
			goodsList: [],
			// 总数量，用来实现分页
			total: 0,
			// 默认的空图片
			defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
			// 通过节流阀防止发起额外的请求
			isloading: false
		}
	},
	filters: {
		tofixed(num) {
			return Number(num).toFixed(2)
		}
	},
	onLoad(options) {
		console.log(options)
		this.queryObj.query = options.query || ''
		this.queryObj.cid = options.cid || ''
		this.gitGoodsList()
	},
	// 上拉触底事件
	onReachBottom() {
		if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$total('数据加载完毕', 'none')
		if (this.isloading) return
		// 让页码值自增 +1
		this.queryObj.pagenum++
		// 重新获取列表数据
		this.gitGoodsList()
	},
	// 下拉刷新的事件
	onPullDownRefresh() {
		// 1. 重置关键数据
		this.queryObj.pagenum = 1
		this.total = 0
		this.isloading = false
		this.goodsList = []
		// 重新发起请求
		this.gitGoodsList(() => uni.stopPullDownRefresh())
	},
	methods: {
		async gitGoodsList(cb) {
			this.isloading = true
			const { data: res } = await uni.$http.get('/goods/search', this.queryObj)
			// this.goodsList = res.message.goods
			// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
			this.goodsList = [...this.goodsList, ...res.message.goods]
			this.isloading = false
			// 只要数据请求完毕，就立即按需调用 cb 回调函数 关闭下拉框
			cb && cb() // 传递了 cb 就调用 cb() 这个回调函数
			this.total = res.message.total
			// console.log(this.total)
			// console.log(this.goodsList)
		},
		// 跳转到详情页
		gotoDetail(item) {
			uni.navigateTo({
				url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
			})
		}
	}
}
</script>

<style lang="scss">
.goods-item {
	display: flex;
	padding: 10px 5px;
	border-bottom: 1px solid #f0f0f0;

	.goods-item-left {
		margin-right: 5px;

		.goods-pic {
			width: 100px;
			height: 100px;
			display: block;
		}
	}

	.goods-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.goods-name {
			font-size: 13px;
		}

		.goods-price {
			font-size: 16px;
			color: #c00000;
		}
	}
}
</style>
